<template>
	<view class="earnings-container">
		<!-- 收益总览区域 -->
		<view class="earnings-overview">
			<view class="overview-header">
				<view class="total-earnings">
					<text class="total-label">总推广费</text>
					<text class="total-value">{{ totalEarnings }}</text>
				</view>
			</view>

			<!-- 时间维度收益 -->
			<view class="time-earnings">
				<view class="time-item" @click="showTimeDetail('today')">
					<text class="time-label">今日推广费</text>
					<text class="time-value">{{ todayEarnings }}</text>
				</view>
				<view class="time-item" @click="showTimeDetail('week')">
					<text class="time-label">本周推广费</text>
					<text class="time-value">{{ weekEarnings }}</text>
				</view>
				<view class="time-item" @click="showTimeDetail('month')">
					<text class="time-label">本月推广费</text>
					<text class="time-value">{{ monthEarnings }}</text>
				</view>
			</view>
		</view>
		<view class="earnings-content">
			<!-- 推广人数统计 -->
			<view class="promotion-stats" @click="showPromotionDetail">
				<view class="stats-item">
					<text class="stats-label">推广人数</text>
					<text class="stats-value">{{ promotionCount }}</text>
				</view>
			</view>

			<!-- 推广成员列表 -->
			<view class="member-list">
				<view v-if="list.length > 0" class="member-item" v-for="(member, index) in list" :key="index" @click="showMemberDetail(member)">
					<view class="member-info">
						<image v-if="member.avatar" :src="member.avatar" mode="aspectFill" class="member-avatar"></image>
						<image v-else src="/static/personalCenter/defalut-header.png" mode="aspectFill" class="member-avatar"></image>
						<view class="member-details">
							<text class="member-name">{{ member.nickname }}</text>
							<text class="member-time">{{ member.created_at || '加入时间未知' }}</text>
						</view>
					</view>
					<view class="member-earnings">
						<text class="earnings-value">{{ member.promotion_amount }}</text>
						<!-- <text class="earnings-label">累计收益</text>    -->
					</view>
				</view>
				<view v-if="list.length === 0" class="empty-state">
					<image src="/static/home/no-data.png" mode="aspectFill" class="empty-image"></image>
					<text class="empty-text">
						暂无推广成员,
						<text style="color: rgb(255, 121, 55)" @click="navigateTo('/pages/personalCenter/promotion/index')">点击前往推广</text>
					</text>
					<text class="empty-tip">分享推广海报，邀请好友加入</text>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>

		<share-flex-vue></share-flex-vue>
	</view>
</template>

<script>
import { isLoggedIn, checkLogin } from '@/utils/auth';
export default {
	data() {
		return {
			loading: false,
			totalEarnings: '0',
			todayEarnings: '0',
			weekEarnings: '0',
			monthEarnings: '0',
			promotionCount: 0,
			members: [],
			list: [],
			page: 1,
			status: 'loadmore'
		};
	},
	onLoad() {
		this.loadEarningsData();
	},
	onPullDownRefresh() {
		this.refreshData();
	},
	onShow() {
		this.reLoad();
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		// 导航到指定页面
		navigateTo(url) {
			// 检查登录在状态
			if (!checkLogin()) {
				uni.navigateTo({
					url: '/login'
				});
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		reLoad() {
			this.list = [];
			this.page = 1;
			this.status = 'loadmore';
			this.getList();
		},
		getList() {
			if (this.status != 'loadmore') return;
			uni.showLoading({
				mask: true
			});

			this.$http
				.get('/h5/user/myPromotion', { page: this.page })
				.then((res) => {
					console.log('this is getList===========>', res);
					const data = res.data;

					this.promotionCount = data.total;

					this.list = [...this.list, ...data.list];
					if (this.list.length >= data.total) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
						this.page++;
					}
				})
				.catch(() => {
					this.status = 'loadmore';
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		loadEarningsData() {
			this.$http.get('/h5/user/wallet/incomeOverview').then((res) => {
				console.log(res, '***********1');

				const data = res.data;
				this.totalEarnings = data.totalPromotionCount;
				this.todayEarnings = data.todayIncome;
				this.weekEarnings = data.weekIncome;
				this.monthEarnings = data.monthIncome;
			});

			// this.loading = true;
			// setTimeout(() => {
			// 	this.loading = false;
			// }, 1000);
		},
		refreshData() {
			this.loadEarningsData();
			uni.stopPullDownRefresh();
		},
		showTimeDetail(type) {
			const titles = {
				today: '今日收益详情',
				week: '本周收益详情',
				month: '本月收益详情'
			};
			// uni.showToast({
			// 	title: titles[type] + '功能开发中',
			// 	icon: 'none'
			// });
		},
		showPromotionDetail() {
			// uni.showToast({
			// 	title: '推广统计详情功能开发中',
			// 	icon: 'none'
			// });
		},
		showMemberDetail(member) {
			// uni.showToast({
			// 	title: '成员详情功能开发中',
			// 	icon: 'none'
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
.earnings-container {
	min-height: 100vh;
	padding-bottom: 120rpx;
	background: #f5f5f6;
}

.earnings-overview {
	padding: 98rpx 24rpx 30rpx 24rpx;
	position: relative;
	overflow: hidden;
	background-image: url('/static/earnings-bg.png');
	background-size: 100% 460rpx;
	background-repeat: no-repeat;
}

.overview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.total-earnings {
	padding-left: 16rpx;

	.total-label {
		display: block;
		margin-bottom: 10rpx;
		font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
		font-size: 40rpx;
		color: #ffffff;
	}

	.total-value {
		display: block;
		font-family: DIN Pro, DIN Pro;
		font-weight: bold;
		font-size: 72rpx;
		color: #ffffff;
	}
}

.time-earnings {
	font-family: DIN Pro, DIN Pro;
	font-weight: bold;
	font-size: 72rpx;
	color: #ffffff;
	background: linear-gradient(180deg, #ffa370 0%, #ff6b35 100%);
	border-radius: 16rpx 16rpx 0 0;
	padding: 24rpx 0;
	display: flex;
	justify-content: space-between;
	backdrop-filter: blur(10rpx);
}

.time-item {
	text-align: center;
	flex: 1;

	.time-label {
		display: block;
		margin-bottom: 10rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
	}

	.time-value {
		display: block;
		font-family: DIN Pro, DIN Pro;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
	}
}
.earnings-content {
	background: #f5f5f6;
	border-radius: 16rpx 16rpx 0 0;
	margin-top: -30rpx;
	position: relative;
	z-index: 1;
	padding-top: 20rpx;
}

.promotion-stats {
	background: linear-gradient(180deg, #ffa370 0%, #ff6b35 100%);
	margin: 20rpx 26rpx 20rpx 26rpx;
	border-radius: 16rpx;
	padding: 34rpx 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	color: #ffffff;

	.stats-label {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
	}

	.stats-value {
		font-family: DIN Pro, DIN Pro;
		font-weight: bold;
		font-size: 48rpx;
		line-height: 32rpx;
		text-align: right;
	}
}

.member-list {
	margin: 0 26rpx;
}

.member-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 20rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	background: #ffffff;
	&:last-child {
		border-bottom: 0;
	}
}

.member-info {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.member-avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
}

.member-details {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.member-name {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 32rpx;
	color: #333333;
}

.member-time {
	font-size: 24rpx;
	color: #999;
}

.member-earnings {
	text-align: right;

	.earnings-value {
		display: block;
		font-family: DIN Pro, DIN Pro;
		font-weight: bold;
		font-size: 40rpx;
		line-height: 40rpx;
		// margin-bottom: 4rpx;
		background: linear-gradient(180deg, #ffa370 0%, #ee722c 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}

	.earnings-label {
		display: block;
		font-size: 24rpx;
		color: #999;
	}
}

.empty-state {
	text-align: center;
	padding: 60rpx 0;

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		display: block;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.empty-tip {
		display: block;
		font-size: 24rpx;
		color: #ccc;
	}
}

.loading-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.7);
	border-radius: 20rpx;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
	z-index: 9999;
}

// .loading-spinner {
// 	width: 60rpx;
// 	height: 60rpx;
// 	border: 4rpx solid rgba(255, 255, 255, 0.3);
// 	border-top: 4rpx solid white;
// 	border-radius: 50%;
// 	animation: spin 1s linear infinite;
// }

// @keyframes spin {
// 	0% { transform: rotate(0deg); }
// 	100% { transform: rotate(360deg); }
// }

.loading-text {
	color: white;
	font-size: 28rpx;
}
</style>
